<template>
  <el-container class="layout-container">
    <!-- 背景视频区域 - 移到最前面，确保覆盖整个页面 -->
    <BackgroundVideo class="full-page-video" />
    <el-affix>
      <el-header class="layout-header" :class="{ 'header-fixed': isHeaderFixed }">

        <!-- 桌面端导航 -->
        <nav class="desktop-nav" v-show="!isMobile">
          <div class="nav-container">
            <div class="nav-center">
              <div class="menu-icon-container" @click="showMobileMenu = true">
                <img class="menu-icon" src="public/images/theme/shape-menu-normal.svg" alt="LELO">
                <span class="menu-icon-text">{{ t('nav.explore') }}</span>
              </div>
              <div>
                <img src="public/images/logo.svg" alt="LELO" class="logo" @click="navigateHome">
              </div>
              <div class="nav-actions-icon">
                <LanguageSelector />
                <img src="public/images/theme/shape-search-normal-new.svg" alt="LELO" class="search-icon">
                <img src="public/images/theme/shape-person-normal.svg" alt="LELO" class="search-icon">
                <img src="public/images/theme/icon-cart-empty-white.svg" alt="LELO" class="search-icon">
              </div>
            </div>
          </div>
        </nav>
      </el-header>
    </el-affix>
    <!-- 头部区域 -->

    <!-- 移动端菜单抽屉 -->
    <el-drawer v-if="showMobileMenu" v-model="showMobileMenu" direction="ltr" size="40%" :with-header="false"
      class="mobile-menu-drawer" @close="handleDrawerClose">
      <div class="mobile-menu-content">
        <div class="drawer-header">
          <img src="public/images/logo.svg" alt="LELO" class="drawer-logo">
        </div>
        <el-menu mode="vertical" background-color="#1A1A1A" text-color="#ffffff" active-text-color="#D4AF37">
          <template v-for="item in menuItems" :key="item.index">
            <el-menu-item v-if="!item.children" :index="item.index" class="menu-item-primary">
              <template v-if="item.icon">
                <el-icon v-if="isElementIcon(item.icon)" class="menu-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span v-else class="menu-icon svg-icon" :style="{ backgroundImage: `url(${item.icon})` }"></span>
              </template>
              {{ item.title }}
            </el-menu-item>
            <el-sub-menu v-else :index="item.index" class="submenu-primary">
              <template #title>
                {{ item.title }}
              </template>
              <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index"
                class="menu-item-secondary">
                {{ child.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </div>
    </el-drawer>

    <!-- 主体内容区域 -->
    <el-main class="layout-main">
      <div class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">{{ t('hero.title') }}</h1>
          <p class="hero-subtitle">{{ t('hero.subtitle') }}</p>
          <el-button class="hero-button">{{ t('hero.explore') }}</el-button>
        </div>
      </div>
      <div class="textTitle">
        <div class="textTitle-content">
          {{ t('intro.text') }}
        </div>
      </div>

      <!-- 产品分类区域 -->
      <div class="category-section">
        <div class="category-container">
          <div class="category-grid" 
               @scroll="updateCurrentCategory"
               @mousedown="handleMouseDown"
               @mousemove="handleMouseMove"
               @mouseup="handleMouseUp"
               @mouseleave="handleMouseLeave">
            <div v-for="category in categories" :key="category.id" class="category-card">
              <div class="category-image" :style="{ backgroundImage: `url(${category.image})` }">
                <h2>{{ t(`categories.${category.type}`) }}</h2>
                <el-button class="category-button" @click="navigateTo(category.link)">{{ t('categories.learn') }}</el-button>
              </div>
            </div>
          </div>
          <div class="scroll-dots">
            <div class="scroll-track">
              <div class="scroll-thumb" :style="{ width: `${100 / categories.length}%`, transform: `translateX(${currentCategoryIndex * 100}%)` }"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 产品展示区域 -->
      <div class="bestsellers-section">
        <h2 class="section-title">{{ t('products.title') }}</h2>
        <div class="products-grid">
          <div v-for="product in getProducts" :key="product.id" class="product-card">
            <div class="product-badges">
              <span v-if="product.isNew" class="badge new">{{ t('products.new') }}</span>
              <span v-if="product.isBestseller" class="badge bestseller">{{ t('products.bestseller') }}</span>
              <span v-if="product.pricing.discount" class="badge discount">{{ product.pricing.discount }}</span>
            </div>
            <div class="product-image">
              <img :src="product.images[product.selectedColor]" :alt="product.title" class="product-image">
            </div>
            <div class="product-info">
              <h3 class="product-title">{{ product.title }}</h3>
              <p class="product-subtitle">{{ product.subtitle }}</p>
              <div class="product-price">
                <span class="discount">{{ product.pricing.discount }}</span>
                <span class="original-price">{{ product.pricing.originalPrice }}</span>
                <span class="current-price">{{ product.pricing.price }}</span>
              </div>
              <div class="product-colors">
                <span v-for="color in product.colors" 
                      :key="color" 
                      class="color-dot"
                      :class="[color, { active: product.selectedColor === color }]"
                      @click="selectColor(product, color)">
                </span>
              </div>
            </div>
            <button class="quick-view-btn" @click="navigateToProduct(product.link)">{{ t('products.quickView') }}</button>
          </div>
        </div>
      </div>

      <!-- 邮件订阅区域 -->
      <div class="newsletter-section">
        <div class="newsletter-content">
          <h2 class="newsletter-title">{{ t('newsletter.title') }}</h2>
          <p class="newsletter-subtitle">{{ t('newsletter.subtitle') }}</p>
          <div class="newsletter-form">
            <input type="email" :placeholder="t('newsletter.placeholder')" class="newsletter-input" />
            <button class="newsletter-button">{{ t('newsletter.subscribe') }}</button>
          </div>
          <div class="newsletter-terms">
            <label class="terms-checkbox">
              <input type="checkbox" />
              <span class="checkbox-text">{{ t('newsletter.agree') }} <a href="/privacy" class="terms-link">{{ t('newsletter.privacy') }}</a></span>
            </label>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="layout-footer">
      <AppFooter />
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import type { Ref } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { useMenuItems } from '@/data/menu'
import BackgroundVideo from '@/components/BackgroundVideo.vue'
import AppFooter from '@/components/AppFooter.vue'
import LanguageSelector from '@/components/LanguageSelector.vue'

const { t } = useI18n()

// 响应式状态
const showBanner = ref(true)
const showMobileMenu = ref(false)
const isHeaderFixed = ref(false)
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

interface ProductImages {
  [key: string]: string
}

interface Product {
  id: number
  title: string
  subtitle: string
  images: ProductImages
  pricing: {
    originalPrice: string
    price: string
    discount: string
  }
  isNew: boolean
  isBestseller: boolean
  colors: string[]
  selectedColor: string
  link: string
}

interface Category {
  id: number;
  type: 'bestsellers' | 'female' | 'couple' | 'male';
  image: string;
  link: string;
}

// 分类数据
const categories: Category[] = [
  {
    id: 1,
    type: 'bestsellers',
    image: '/images/cp/categories_desktop_bestsellers_900x552.webp',
    link: '/bestseller'
  },
  {
    id: 2,
    type: 'female',
    image: '/images/cp/categories_desktop_couples_900x552.webp',
    link: '/female'
  },
  {
    id: 3,
    type: 'couple',
    image: '/images/cp/desktop_women.webp',
    link: '/couple'
  },
  {
    id: 4,
    type: 'male',
    image: '/images/cp/categories_desktop_couples_man.webp',
    link: '/male'
  }
]

// 产品数据
const getProducts = computed<Product[]>(() => {
  const products: Product[] = [
    {
      id: 1,
      title: t('products.details.soraya.title'),
      subtitle: t('products.details.soraya.subtitle'),
      images: {
        blue: '/images/products/soraya.webp',
        purple: '/images/products/soraya-purple.webp',
        black: '/images/products/soraya-black.webp'
      },
      pricing: {
        originalPrice: `${t('common.currency')} 1,769`,
        price: `${t('common.currency')} 1,326.75`,
        discount: '-25%'
      },
      isNew: true,
      isBestseller: true,
      colors: ['blue', 'purple', 'black'],
      selectedColor: 'blue',
      link: '/products/soraya-wave'
    },
    {
      id: 2,
      title: t('products.details.tor.title'),
      subtitle: t('products.details.tor.subtitle'),
      images: {
        purple: '/images/products/tor.webp',
        black: '/images/products/tor-black.webp',
        blue: '/images/products/tor-blue.webp'
      },
      pricing: {
        originalPrice: `${t('common.currency')} 1,029`,
        price: `${t('common.currency')} 823.20`,
        discount: '-20%'
      },
      isNew: false,
      isBestseller: true,
      colors: ['purple', 'black', 'blue'],
      selectedColor: 'purple',
      link: '/products/tor-3'
    },
    {
      id: 3,
      title: t('products.details.f1s.title'),
      subtitle: t('products.details.f1s.subtitle'),
      images: {
        black: '/images/products/f1s.webp'
      },
      pricing: {
        originalPrice: `${t('common.currency')} 1,779`,
        price: `${t('common.currency')} 1,334.25`,
        discount: '-25%'
      },
      isNew: true,
      isBestseller: false,
      colors: ['black'],
      selectedColor: 'black',
      link: '/products/f1s-v3'
    },
    {
      id: 4,
      title: t('products.details.enigma.title'),
      subtitle: t('products.details.enigma.subtitle'),
      images: {
        black: '/images/products/enigma.webp'
      },
      pricing: {
        originalPrice: `${t('common.currency')} 2,499`,
        price: `${t('common.currency')} 1,749.30`,
        discount: '-30%'
      },
      isNew: false,
      isBestseller: true,
      colors: ['black'],
      selectedColor: 'black',
      link: '/products/enigma-double-sonic'
    }
  ]
  return products
})

// 判断是否为 Element Plus 图标
const isElementIcon = (icon: string) => {
  const elementIcons = [
    'Menu', 'Search', 'User', 'ShoppingCart', 'Close', 'Female', 'Male',
    'Gift', 'Heart', 'ShoppingBag', 'Trophy', 'Fire', 'Diamond',
    'StarFilled', 'StarHalf'
  ]
  return elementIcons.includes(icon)
}

// 方法
const closeBanner = () => {
  showBanner.value = false
}

const toggleMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const handleDrawerClose = () => {
  showMobileMenu.value = false
}

const navigateHome = () => {
  // 导航到首页
  navigateTo('/')
}

// 监听滚动事件
const handleScroll = () => {
  // 当滚动超过一定距离时，头部固定在顶部
  isHeaderFixed.value = window.scrollY > 100
}

// 颜色选择方法
const selectColor = (product: Product, color: string): void => {
  product.selectedColor = color
}

// 产品跳转方法
const navigateToProduct = (link: string) => {
  navigateTo(link)
}

const currentCategoryIndex = ref(0)

const updateCurrentCategory = () => {
  const container = document.querySelector('.category-grid')
  if (!container) return
  
  const scrollLeft = container.scrollLeft
  const card = container.querySelector('.category-card') as HTMLElement
  const cardWidth = card?.offsetWidth || 0
  const newIndex = Math.round(scrollLeft / (cardWidth + 24)) // 24px is the gap
  currentCategoryIndex.value = newIndex
}

// 拖拽相关状态
const isDragging = ref(false)
const startX = ref(0)
const scrollLeft = ref(0)
const velocity = ref(0)
const lastX = ref(0)
const lastTime = ref(0)
const animationFrame = ref<number | null>(null)

// 拖拽方法
const handleMouseDown = (e: MouseEvent) => {
  isDragging.value = true
  const slider = document.querySelector('.category-grid') as HTMLElement
  startX.value = e.pageX - slider.offsetLeft
  scrollLeft.value = slider.scrollLeft
  lastX.value = e.pageX
  lastTime.value = Date.now()
  
  // 取消任何正在进行的动画
  if (animationFrame.value) {
    cancelAnimationFrame(animationFrame.value)
    animationFrame.value = null
  }
  
  // 添加拖拽类
  slider.classList.add('dragging')
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  e.preventDefault()
  const slider = document.querySelector('.category-grid') as HTMLElement
  const x = e.pageX - slider.offsetLeft
  const walk = (x - startX.value) * 2
  
  // 计算速度
  const currentTime = Date.now()
  const deltaTime = currentTime - lastTime.value
  const deltaX = e.pageX - lastX.value
  velocity.value = deltaX / deltaTime
  
  slider.scrollLeft = scrollLeft.value - walk
  
  lastX.value = e.pageX
  lastTime.value = currentTime
}

const handleMouseUp = () => {
  if (!isDragging.value) return
  isDragging.value = false
  
  const slider = document.querySelector('.category-grid') as HTMLElement
  slider.classList.remove('dragging')
  
  // 应用惯性滚动
  if (Math.abs(velocity.value) > 0.1) {
    const startVelocity = velocity.value
    const startTime = Date.now()
    const startScrollLeft = slider.scrollLeft
    
    const animate = () => {
      const currentTime = Date.now()
      const elapsed = currentTime - startTime
      
      // 使用缓动函数使速度逐渐减小，调整衰减时间为800ms使惯性更强
      const currentVelocity = startVelocity * Math.exp(-elapsed / 800)
      
      if (Math.abs(currentVelocity) > 0.1) {
        // 增加速度系数使滚动更快
        slider.scrollLeft += currentVelocity * 24
        animationFrame.value = requestAnimationFrame(animate)
      } else {
        // 滚动结束后对齐到最近的卡片，使用更快的过渡
        const card = slider.querySelector('.category-card') as HTMLElement
        const cardWidth = card?.offsetWidth || 0
        const gap = 24
        const targetScroll = Math.round(slider.scrollLeft / (cardWidth + gap)) * (cardWidth + gap)
        
        slider.scrollTo({
          left: targetScroll,
          behavior: 'smooth'
        })
      }
    }
    
    animationFrame.value = requestAnimationFrame(animate)
  } else {
    // 如果没有明显的速度，直接对齐到最近的卡片
    const card = slider.querySelector('.category-card') as HTMLElement
    const cardWidth = card?.offsetWidth || 0
    const gap = 24
    const targetScroll = Math.round(slider.scrollLeft / (cardWidth + gap)) * (cardWidth + gap)
    
    slider.scrollTo({
      left: targetScroll,
      behavior: 'smooth'
    })
  }
}

const handleMouseLeave = () => {
  if (isDragging.value) {
    handleMouseUp()
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 获取菜单项
const menuItems = computed(() => useMenuItems())
</script>

<style lang="scss">
@use '@/assets/scss/variables' as *;

/* 重置所有元素的默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
}

/* 重置根元素样式 */
:root {
  margin: 0;
  padding: 0;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
}

.textTitle {
  position: relative;
  width: 100%;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 2;
  margin-top: -50px;

  .textTitle-content {
    padding: clamp(30px, 5vw, 60px);
    width: clamp(280px, 90%, 800px);
    margin: 0 auto;
    line-height: 1.8;
    font-size: clamp(16px, 2vw, 20px);
  }

  @media (max-width: $breakpoint-md) {
    margin-top: -30px;
  }
}

/* 重置 HTML 和 body 样式 */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  display: block !important;
  box-sizing: border-box;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
  background-color: #0c0c0c;
}

/* 重置 Nuxt 容器样式 */
#__nuxt {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
}

/* 重置 Element Plus 容器样式 */
.el-container {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  min-height: 100vh;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
  position: relative;
}

.layout-container {
  min-height: 100vh;
  background: #000;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  box-sizing: border-box;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
  position: relative;
  z-index: 1;
}

/* 全屏视频样式 */
.full-page-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  max-height: 840px;
  border: solid transparent;
  border-width: 0 0 50px;
  overflow: hidden;
  z-index: 0;

  @media (max-width: $breakpoint-md) {
    height: calc(100vh - 60px);
    max-height: 600px;
    border-width: 0 0 30px;
  }
}

// 顶部横幅
.top-banner {
  background: $accent-color;
  padding: 8px 0;
  position: relative;
  z-index: 1001;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;

  .banner-content {
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-family: Lab Grotesque, Helvetica, Arial, sans-serif;

    span {
      color: $primary-color;
      font-weight: 500;
      font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
    }

    .banner-btn {
      color: $primary-color;
      font-weight: 600;
      font-family: Lab Grotesque, Helvetica, Arial, sans-serif;

      &:hover {
        text-decoration: underline;
      }
    }

    .close-btn {
      position: absolute;
      right: 20px;
      color: $primary-color;
      padding: 4px;
      font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
    }
  }
}

// 头部区域
.layout-header {
  padding: 0;
  background-color: transparent !important;
  transition: all 0.3s ease;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  height: 80px;
  width: 100%;

  &.header-fixed {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    height: 60px;
  }
}

// 桌面端导航
.desktop-nav {
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: Lab Grotesque, Helvetica, Arial, sans-serif;
  padding: 0 40px;

  .nav-container {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .nav-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;

    .menu-icon-container {
      display: flex;
      align-items: center;
      cursor: pointer;

      .menu-icon {
        width: 20px;
        margin-right: 8px;
      }

      .menu-icon-text {
        font-size: 14px;
        font-weight: 400;
      }
    }

    .nav-actions-icon {
      display: flex;
      align-items: center;
      gap: 24px;

      img {
        width: 20px;
        cursor: pointer;
      }
    }

    .logo {
      height: 24px;
      cursor: pointer;
    }
  }
}

// 移动端菜单抽屉
.mobile-menu-drawer {
  .el-drawer__body {
    padding: 0;
    background: $primary-color;
    height: 100%;
    overflow: hidden;
  }

  .mobile-menu-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-header {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba($accent-color, 0.1);
      flex-shrink: 0;

      .drawer-logo {
        height: 30px;
      }
    }

    .el-menu {
      flex: 1;
      border: none;
      overflow-y: auto;
      overflow-x: hidden;
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */

      &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
      }

      // 一级菜单项样式
      .menu-item-primary {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        font-weight: 900;
        margin: 10px 0px;
        cursor: pointer;
        display: inline-block;
        width: 100%;

        .menu-icon {
          margin-right: 10px;
          font-size: 18px;
          vertical-align: middle;
        }

        .svg-icon {
          width: 18px;
          height: 18px;
          vertical-align: middle;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          display: inline-block;
        }
      }

      // 二级菜单项样式
      .menu-item-secondary {
        height: 40px;
        line-height: 40px;
        font-size: 11px;
        font-weight: 900;
        margin: 5px 0px;
        cursor: pointer;
        display: inline-block;
        width: 100%;
        padding-left: 30px !important;
      }
    }
  }
}

// 主体内容区域
.layout-main {
  background-color: transparent;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.hero-section {
  height: calc(100vh - 80px);
  max-height: 840px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 15vh;
  position: relative;
  z-index: 1;

  @media (max-width: $breakpoint-md) {
    height: calc(100vh - 60px);
    max-height: 600px;
    padding-bottom: 10vh;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #fff;
  padding: 0 5vw;
  width: 100%;
  max-width: 1400px;

  .hero-title {
    font-size: clamp(42px, 8vw, 84px);
    font-weight: 900;
    margin-bottom: clamp(12px, 2vw, 16px);
    letter-spacing: 0;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
  }

  .hero-subtitle {
    font-size: clamp(20px, 4vw, 32px);
    font-weight: 400;
    margin-bottom: clamp(16px, 3vw, 24px);
    letter-spacing: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.3s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .hero-button {
    background-color: #fff;
    color: #0b0c0d;
    height: 44px;
    min-width: 120px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s;
    opacity: 0;
    animation-fill-mode: forwards;

    &:hover {
      background-color: rgba(255, 255, 255, 0.9);
      transform: translateY(-2px);
    }
  }

  @media (max-width: $breakpoint-md) {
    padding: 0 20px;
  }
}

// 页脚
.layout-footer {
  padding: 0;
  background: $secondary-color;
}

// 响应式样式
@media (max-width: $breakpoint-md) {
  .desktop-nav {
    display: none;
  }

  .layout-header {
    height: 60px;
  }

  .category-grid {
    gap: 16px;
    padding: 0 16px;
  }

  .category-card {
    width: 85%;
    height: 180px;
  }
}

@media (min-width: $breakpoint-md) {
  .mobile-nav {
    display: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.category-section {
  position: relative;
  padding: clamp(40px, 5vw, 80px) 0 20px;
  background: #000;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

.category-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.category-grid {
  display: flex;
  gap: 16px;
  padding: 0 5vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
  will-change: scroll-position;
  
  &::-webkit-scrollbar {
    display: none;
  }
  
  &:active {
    cursor: grabbing;
  }
  
  &.dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    scroll-behavior: auto;
    
    * {
      pointer-events: none;
    }
  }
}

.category-card {
  position: relative;
  min-width: 45vw;
  max-width: 600px;
  height: 60vh;
  max-height: 552px;
  flex-shrink: 0;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: 8px;
  touch-action: pan-y pinch-zoom;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  
  @media (max-width: $breakpoint-md) {
    min-width: 80vw;
    height: 40vh;
  }
  
  .category-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 4vw, 32px);
    pointer-events: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;

    h2 {
      color: #fff;
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 600;
      margin-bottom: clamp(12px, 2vw, 16px);
      position: relative;
      z-index: 2;
    }

    .category-button {
      background-color: #fff;
      color: #000;
      border: none;
      height: clamp(36px, 4vh, 44px);
      padding: 0 clamp(20px, 2.5vw, 28px);
      font-size: clamp(14px, 1.5vw, 16px);
      border-radius: 4px;
      position: relative;
      z-index: 2;
      width: fit-content;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      z-index: 1;
      pointer-events: none;
    }
  }
}

// 修改滑动指示器样式
.scroll-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 0 5vw;
  
  .scroll-track {
    width: 100%;
    max-width: 400px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  
  .scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.bestsellers-section {
  padding: 80px 0;
  background: #000;
  color: #fff;
  
  .section-title {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 40px;
    padding: 0 32px;
    letter-spacing: 1px;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 0 32px;
  margin: 0 auto;
  max-width: 1400px;
}

.product-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  height: auto;
  
  .quick-view-btn {
    position: relative;
    width: 100%;
    height: 40px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
    transform: translateY(100%);
    opacity: 0;
    
    &:hover {
      background: #333;
    }
  }
  
  &:hover {
    .quick-view-btn {
      transform: translateY(0);
      opacity: 1;
    }
    
    .product-image img {
      transform: scale(1.05);
    }
  }
  
  .product-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 2;
    
    .badge {
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 4px;
      
      &.new {
        background: #000;
        color: #fff;
      }
      
      &.bestseller {
        background: #D4AF37;
        color: #000;
      }
      
      &.discount {
        background: #FF4D4F;
        color: #fff;
      }
    }
  }
  
  .product-image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    padding: 20px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
  }
  
  .product-info {
    .product-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
      color: #000;
    }
    
    .product-subtitle {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 12px;
    }
    
    .product-price {
      margin-bottom: 12px;
      
      .discount {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        margin-right: 8px;
      }
      
      .original-price {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
        text-decoration: line-through;
      }
      
      .current-price {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        margin-left: 8px;
      }
    }
    
    .product-colors {
      display: flex;
      gap: 8px;
      margin-bottom: 0;
      
      .color-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
        
        &.active {
          transform: scale(1.2);
          border-color: rgba(0, 0, 0, 0.8);
        }
        
        &:hover {
          transform: scale(1.1);
          border-color: rgba(0, 0, 0, 0.5);
        }
        
        &.blue {
          background: #0066CC;
        }
        
        &.purple {
          background: #9966CC;
        }
        
        &.black {
          background: #000000;
          border-color: rgba(0, 0, 0, 0.3);
          
          &.active {
            border-color: rgba(0, 0, 0, 0.8);
          }
          
          &:hover {
            border-color: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }
}

@media (max-width: $breakpoint-md) {
  .bestsellers-section {
    padding: 40px 0;
    
    .section-title {
      font-size: 20px;
      margin-bottom: 24px;
      padding: 0 20px;
    }
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 0 20px;
  }
  
  .product-card {
    padding: 16px;
    
    .product-badges {
      top: 16px;
      left: 16px;
    }
  }
}

.newsletter-section {
  position: relative;
  height: 60vh;
  min-height: 500px;
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/images/banner/_1920x579_11.webp') center/cover no-repeat;
  color: #fff;
  text-align: center;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  
  .newsletter-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .newsletter-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 600;
    margin-bottom: 16px;
  }
  
  .newsletter-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .newsletter-form {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    
    @media (max-width: $breakpoint-md) {
      flex-direction: column;
    }
  }
  
  .newsletter-input {
    flex: 1;
    height: 48px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    color: #000;
    
    &::placeholder {
      color: rgba(0, 0, 0, 0.4);
    }
    
    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }
  }
  
  .newsletter-button {
    height: 48px;
    padding: 0 32px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    background: #000;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    
    &:hover {
      background: #333;
    }
  }
  
  .newsletter-terms {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    
    .terms-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      
      input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
      }
      
      .checkbox-text {
        line-height: 1.4;
      }
    }
    
    .terms-link {
      color: #fff;
      text-decoration: underline;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  @media (max-width: $breakpoint-md) {
    height: 70vh;
    min-height: 400px;
  }
}
</style>